<template>
  	<div>
  		
  		<Button class="Button" style="margin:20px" type="primary" @click="create">新增文档</Button>

  		<Modal v-model="modal" title="用户登陆" width="30" :closable="false" :mask-closable="false">
  			<Form ref="form" :model="newData" :label-width="90">
        		<FormItem label="登陆账号：">
          			<Input v-model="newData.name" placeholder="请输入登陆账号"></Input>
        		</FormItem>
    			<FormItem label="登陆密码：">
          			<Input v-model="newData.pswd" placeholder="请输入登录密码"></Input>
        		</FormItem>
      		</Form>
  			<div slot="footer">
        		<Button class="Button" type='primary' @click="submit">确认登陆</Button>
      		</div>
    	</Modal>

    	<Modal v-model="modal2" title="新增文档" width="70">
  			<Form ref="form" :model="changeData" :label-width="90">
        		<FormItem label="文档标题：">
          			<Input v-model="changeData.title" placeholder="请输入文档标题"></Input>
        		</FormItem>
    			<FormItem label="文档内容：">
          			<!-- <vue-tinymce :value="changeData.content"  @catchData="catchData"></vue-tinymce> -->
          			<vue-wangeditor :value="changeData.content" @catchData="catchData"></vue-wangeditor>
        		</FormItem>
      		</Form>
  			<div slot="footer">
        		<Button class="Button" type='primary' :loading="loading1" @click="submit2">立即提交</Button>
      		</div>
    	</Modal>

    	<Table :loading="loading" style="margin:20px" :columns="columns" :data="data"></Table>

  	</div>
</template>

<script>
export default {
  	data() {
    	return {
    		modal: true,
    		modal2: false,
    		newData:{
    			name: '',
    			pswd: '',
    		},
    		changeData:{
    			title: '',
    			content: '',
    		},
    		loading: false,
    		data: [],
    		columns: [
    			{ title: "文档标题", key: "title", align: "center" },
    			{
		          title: "通知内容",
		          align: "center",
		          render: (h, params) => {
		            return h("span", {
		              domProps: {
		                innerHTML: params.row.content
		              }
		            });
		          }
		        },
		        {
		          title: "操作",
		          align: "center",
		          render: (h, params) => {
		            return h("div", [
		              h(
		                "Button",
		                {
		                  props: { type: "success" },
		                  style: { 'margin-right': '10px' },
		                  on: {
		                    click: () => {
		                      this.update(params);
		                    }
		                  }
		                },
		                "修改文档"
		              ),
		              h(
		                "Button",
		                {
		                  props: { type: "warning" },
		                  on: {
		                    click: () => {
		                      this.del(params);
		                    }
		                  }
		                },
		                "删除文档"
		              )
		            ]);
		          }
		        }

    		],
    		loading1: false,



    	}
    },
    methods:{
    	submit(){
    		if(this.newData.name == ''){
    			this.$Message.error("账号不能为空");
    			return false
    		}
    		if(this.newData.pswd == ''){
    			this.$Message.error("密码不能为空");
    			return false
    		}
    		if(this.newData.name != 'admin'){
    			this.$Message.error("账号错误");
    			return false
    		}
    		if(this.newData.pswd != 'admin'){
    			this.$Message.error("密码错误");
    			return false
    		}
    		this.modal = false
    		this.getDocs()
    	},
    	submit2(){
    		if(this.changeData.title == ''){
    			this.$Message.error("文档标题不能为空");
    			return false
    		}
    		if(this.changeData.content == ''){
    			this.$Message.error("文档内容不能为空");
    			return false
    		}
    		this.loading1 = true
    		if(this.id == ''){
    			this.$http("/stage/doc/saveHelpDoc",
		        	{
		        		content: this.changeData.content,
		        		title: this.changeData.title,
		        	},
		        	"post",
		        	res => {
		         	if (res.data.code == 200) {
		            	this.modal2 = false
		            	this.getDocs()
		            	this.$Message.success('新增文档成功');
	          		} else {
		            	this.$Message.error(res.data.msg);
		          	}
		          	this.loading1 = false;
		        });
    		}else{
    			this.$http(
		        	"/stage/doc/updateHelpDoc",
		        	{
		        		content: this.changeData.content,
		        		title: this.changeData.title,
		        		id: this.id
		        	},
		        	"post",
		        	res => {
		         	if (res.data.code == 200) {
		            	this.modal2 = false
		            	this.getDocs()
		            	this.$Message.success('修改文档成功');
	          		} else {
		            	this.$Message.error(res.data.msg);
		          	}
		          	this.loading1 = false;
		        });
    		}
    	},
    	create(){
    		this.modal2 = true
    		this.id = ''
    		this.changeData = {
    			title: '',
    			content: '',
    		}
    	},
    	getDocs() {
	      	this.loading = true;
	      	this.$http(
	        	"/stage/doc/getDocs",
	        	{},
	        	"get",
	        	res => {
	         	if (res.data.code == 200) {
	            	this.data = res.data.data
          		} else {
	            	this.$Message.error(res.data.msg);
	          	}
	          	this.loading = false;
	        });
    	},
    	catchData(data) {
      		this.changeData.content = data;
    	},
    	update(data){
    		this.changeData = {
    			title: data.row.title,
    			content: data.row.content
    		}
    		this.id = data.row.id
    		this.modal2 = true
    	},
    	del(params){
    		this.$Modal.confirm({
		        title: "提示",
		        content:
		          "<p>确定要删除文档<strong> " +
		          params.row.title +
		          " </strong>吗？</p>",
		        onOk: () => {
		          this.loading = true;
		          this.$http(
		            "/stage/doc/deleteHelpDoc",
		            {
		              id: params.row.id
		            },
		            "get",
		            res => {
		              if (res.data.code == 200) {
		                this.$Message.success("删除文档成功");
		                this.getDocs();
		              } else {
		                this.$Message.error(res.data.msg);
		              }
		            }
		          );
		        },
		        onCancel: () => {}
		      });
    	},




    }
}
</script>

<style scoped>

</style>